<template>
    <div class="ar-list-box">
        <div class="base border-l border-r bg-white">
            <div class="left-box">
                <div>
                    <!--                        因为是固定的，所以就不把选项写成数组了-->
                    <van-collapse v-model="activeName" accordion>
                        <van-collapse-item title="推荐" name="1">
                            <p class="ml-4 hover:bg-gray-100 cursor-pointer" :style="{color: lbTagInfo.bgTextColor[0]}"
                               @click="onClickLbTags(0, -1, -1)">热门歌手</p>
                        </van-collapse-item>
                        <van-collapse-item title="华语" name="2">
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[1]}" @click="onClickLbTags(1, 7, 1)">华语男歌手</p>
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[2]}" @click="onClickLbTags(2, 7, 2)">华语女歌手</p>
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[3]}" @click="onClickLbTags(3, 7, 3)">华语组合/乐队</p>
                        </van-collapse-item>
                        <van-collapse-item title="欧美" name="3">
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[4]}" @click="onClickLbTags(4, 96, 1)">欧美男歌手</p>
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[5]}" @click="onClickLbTags(5, 96, 2)">欧美女歌手</p>
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[6]}" @click="onClickLbTags(6, 96, 3)">欧美组合/乐队</p>
                        </van-collapse-item>
                        <van-collapse-item title="日本" name="4">
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[7]}" @click="onClickLbTags(7, 8, 1)">日本男歌手</p>
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[8]}" @click="onClickLbTags(8, 8, 2)">日本女歌手</p>
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[9]}" @click="onClickLbTags(9, 8, 3)">日本组合/乐队</p>
                        </van-collapse-item>
                        <van-collapse-item title="韩国" name="5">
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[10]}" @click="onClickLbTags(10, 16, 1)">韩国男歌手</p>
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[11]}" @click="onClickLbTags(11, 16, 2)">韩国女歌手</p>
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[12]}" @click="onClickLbTags(12, 16, 3)">韩国组合/乐队</p>
                        </van-collapse-item>
                        <van-collapse-item title="其他" name="6">
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[13]}" @click="onClickLbTags(13, 0, 1)">其他男歌手</p>
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[14]}" @click="onClickLbTags(14, 0, 2)">其他女歌手</p>
                            <p class="ml-4 my-1 hover:bg-gray-100 cursor-pointer"
                               :style="{color: lbTagInfo.bgTextColor[15]}" @click="onClickLbTags(15, 0, 3)">其他组合/乐队</p>
                        </van-collapse-item>
                    </van-collapse>
                </div>
            </div>
            <div class="right-box">
                <div class="m-8">
                    <div class="rb-top">
                        <p class="font-medium text-2xl">{{requestParam.cName}}</p>
                    </div>
                    <div class="mt-2" v-show="requestParam.cName !== '热门歌手'">
                        <span v-for="(item, index) in rbTopTagInfo.name" :key="index"
                              class="mr-4 p-1 cursor-pointer hover:underline rounded"
                              :style="{background: rbTopTagInfo.bgColor[index], color: rbTopTagInfo.bgTextColor[index]}"
                              @click="onClickRbTags(index)">
                            {{ item }}</span>
                    </div>
                    <div class="rb-content">
                        <div class="grid grid-cols-5 gap-x-2 gap-y-8">
                            <div v-for="(item, index) in listData" :key="index" @click="getRouterToArtistInfo(item.id)">
                                <n-image
                                    width="200"
                                    :style="{ border: '1px solid #999999'}"
                                    :src="item.picUrl + '?param=200y200'"
                                />
                                <p class="hover:underline cursor-pointer" :title="item.name">{{ calString(item.name , 12)}}</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-center mt-2">
                            <n-button type="error" ghost :disabled="isLast" @click="pageClick(-1)">
                                上一页
                            </n-button>
                            <p class="mx-4">当前页数: {{page}}</p>
                            <n-button type="error" ghost :disabled="isNext" @click="pageClick(1)">
                                下一页
                            </n-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {NImage, NPagination, NButton, useNotification} from 'naive-ui';
import {onMounted, reactive, toRefs, watchEffect} from "vue";
import {getArtist} from "@/network/artist/artist";
import {calString} from "@/util/cal";
import {useRouter} from "vue-router";
import {useStore} from "vuex";

export default {
    // 首页歌手页面
    name: "ArtistList",
    setup() {
        const TAG = "ArtistList.vue";
        const router = useRouter();
        const store = useStore();
        const artistListInfo = reactive({
            activeName: '1',
            lbTagInfo: {
                currentLbIdx: 0,
                lastLbIdx: 0,
                bgTextColor: new Array(16).fill("#969799"),
                
            },
            // 歌手按照拼音或者字母排序的导航栏信息
            rbTopTagInfo: {
                name: [],
                // 当前下标
                currenRbTagIdx: 0,
                lastRbTagIdx: 0,
                bgColor: new Array(28).fill("#ffffff"),
                bgTextColor: new Array(28).fill("#000000")
            },
            // 数据接受数组
            listData: [],
            // 是否可以上一页和下一页
            isLast: true,
            isNext: false,
            page: 1,
            // 请求参数记录
            requestParam: {
                cName: '热门歌手',
                cType: -1,
                cArea: -1,
                cInitial: '-1',
                cLimit: 30
            }
        })
        const lbTagArr = {
            'area': {
                '-1': '全部',
                '7': '华语',
                '96': '欧美',
                '8': '日本',
                '16': '韩国',
                '0': '其他'
            },
            'type': {
                '-1': '全部',
                '1': '男歌手',
                '2': '女歌手',
                '3': '乐队',
            }
        }
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        const init = () => {
            getArtist().then(res => {
                artistListInfo.listData = res.data.artists;
                // 无更多数据
                if (!res.data.more) {
                    artistListInfo.isNext = true;
                } else {
                    artistListInfo.isNext = false;
                }
            })
            // 生成26个英文字符数组
            let count = 0;
            artistListInfo.rbTopTagInfo.name[count] = '热门';
            count += 1;
            for (let i = 65; i < 91; i++) {
                artistListInfo.rbTopTagInfo.name[count] = String.fromCharCode(i)
                count++
            }
            artistListInfo.rbTopTagInfo.name[count] = '其他';
            artistListInfo.rbTopTagInfo.bgColor[0] = '#c20c0c';
            artistListInfo.rbTopTagInfo.bgTextColor[0] = '#ffffff';
            artistListInfo.lbTagInfo.bgTextColor[0] = '#ee0a24';
        }
        const refreshData = () => {
            if (artistListInfo.page > 1) {
                // 开启上一页按钮
                artistListInfo.isLast = false;
            } else if (artistListInfo.page == 1) {
                // 关闭上一页按钮
                artistListInfo.isLast = true;
            }
            let offset = (artistListInfo.page - 1) * artistListInfo.requestParam.cLimit;
            getArtist(artistListInfo.requestParam.cType, artistListInfo.requestParam.cArea, offset, artistListInfo.requestParam.cInitial).then(res => {
                artistListInfo.listData = res.data.artists;
                // 无更多数据
                if (!res.data.more) {
                    artistListInfo.isNext = true;
                } else {
                    artistListInfo.isNext = false;
                }
            })
            beLoading();
        }
        // 右边字母排序栏
        const onClickRbTags = (idx) => {
            // 防止重复点击相同的排序选项
            if (idx === artistListInfo.rbTopTagInfo.currenRbTagIdx) {
                return ;
            }
            artistListInfo.rbTopTagInfo.lastRbTagIdx = artistListInfo.rbTopTagInfo.currenRbTagIdx;
            artistListInfo.rbTopTagInfo.currenRbTagIdx = idx;
            artistListInfo.rbTopTagInfo.bgColor[idx] = '#c20c0c';
            artistListInfo.rbTopTagInfo.bgColor[artistListInfo.rbTopTagInfo.lastRbTagIdx] = '#ffffff';
            artistListInfo.rbTopTagInfo.bgTextColor[idx] = '#ffffff';
            artistListInfo.rbTopTagInfo.bgTextColor[artistListInfo.rbTopTagInfo.lastRbTagIdx] = '#000000';
            if (idx === 0) {
                artistListInfo.requestParam.cArea = -1;
                artistListInfo.requestParam.cInitial = '-1';
                refreshData();
            } else if (idx === 27) {
                artistListInfo.requestParam.cArea = 0;
                artistListInfo.requestParam.cInitial = '-1';
                refreshData();
            } else {
                artistListInfo.requestParam.cInitial = artistListInfo.rbTopTagInfo.name[idx];
            }
            
        }
        // 左边折叠栏
        const onClickLbTags = (idx, area, type) => {
            artistListInfo.lbTagInfo.lastLbIdx = artistListInfo.lbTagInfo.currentLbIdx;
            artistListInfo.lbTagInfo.currentLbIdx = idx;
            artistListInfo.lbTagInfo.bgTextColor[idx] = '#ee0a24';
            artistListInfo.lbTagInfo.bgTextColor[artistListInfo.lbTagInfo.lastLbIdx] = '#969799';
            
            artistListInfo.requestParam.cArea = area;
            artistListInfo.requestParam.cType = type;
            artistListInfo.page = 1;
    
            artistListInfo.requestParam.cName = lbTagArr.area[area] + lbTagArr.type[type];
        }
        // 分页按钮
        const pageClick = (flag) => {
            // 防止页数为0
            if (artistListInfo.page - 1 == -1) {
                return;
            }
            if (flag == 1) {
                artistListInfo.page += 1;
            } else {
                artistListInfo.page -= 1;
            }
            window.scrollTo(0, 0);
        }
        onMounted(() => {
            init();
            watchEffect(() => {
                let page = artistListInfo.page;
                let type = artistListInfo.requestParam.cType;
                let area = artistListInfo.requestParam.cArea;
                let i = artistListInfo.requestParam.cInitial;
                let limit = artistListInfo.requestParam.cLimit;
                refreshData();
            })
        })
        const notification = useNotification();
        // 跳转到歌手详情页面
        const getRouterToArtistInfo = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
            } else {
                router.push({path: '/artist', query: {id}});
            }
        }
        return {
            ...toRefs(artistListInfo),
            onClickRbTags,
            onClickLbTags,
            pageClick,
            calString,
            getRouterToArtistInfo
        }
    },
    components: {
        NImage,
        NButton
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.ar-list-box {
    width: $client-width;
    background: #f4f4f4;
    
    .left-box {
        @apply w-1/6 border-r;
    }
    
    .right-box {
        @apply w-5/6;
        min-height: 800px;
        
        .rb-top {
            border-bottom: 2px solid #c20c0c;
        }
        
        .rb-content {
            @apply mt-6;
        }
    }
}
</style>